<template>
  <div>
    <el-row>
      <el-col :span="22" :offset="1">
        <div class="grid-content bg-purple">
          <!--卡片shart-->
          <el-card class="box-card" style="">
            <div style="margin:0 20px;">

              <!--标签页-->
              <el-tabs type="card" v-model="activeName" style="line-height: 40px;">
                <el-tab-pane label="待收费" name="first" :key="'first'">
                  <child1></child1>
                </el-tab-pane>

                <el-tab-pane label="已收费" name="second" :key="'second'">
                  <child2></child2>
                </el-tab-pane>

                <el-tab-pane label="已退费" name="third" :key="'third'">
                  <child3></child3>
                </el-tab-pane>
              </el-tabs>

            </div>
          </el-card>
          <!--卡片end-->

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
  import child1 from './charge1';
  import child2 from './charge2';
  import child3 from './charge3';
  export default {
    components:{
      child1:child1,
      child2:child2,
      child3:child3
    },
    data() {
      return {
        //默认第一个选项卡
        activeName: "first",
      }
    },
    methods: {
    },
    mounted(){
    }
  };
</script>

<style scoped>
  /*卡片的样式*/
  .text {
    /*font-size: 14px;*/
  }
  .item {
    /*margin-bottom: 18px;*/
  }
  .box-card {
    /*width: 1500px;*/
  }
</style>

